<!doctype html>
<html>
<head>
    <include file="public/head"/>
    <title>{$graphical.name}</title>
    <meta name="description" content="{$graphical.name}">
    <meta name="keywords" content="{$graphical.name}">

</head>
<body>
<div class="wrap js-check-wrap">
    <ul class="nav nav-tabs">
        <li class="active"><a>{$graphical.name}</a></li>
    </ul>
    <form method="post" class="js-ajax-form margin-top-20" action="#">
        <div class="table_list">
            <div id="main" style="width: 90%;height:600px;"></div>
        </div>
    </form>
</div>
<input type="hidden" value='<?php echo json_encode($data_val)?>' id='data_val'/>
<input type="hidden" value='<?php echo json_encode($data_name)?>' id='data_name'/>
<include file="public/scripts"/>
<script>
    var data_val = $('#data_val').val();
    var data_name = $('#data_name').val();
    data_val = JSON.parse(data_val);
    data_name = JSON.parse(data_name);
    var shape = "{$graphical.shape}";
    if(shape==1){
        echarts.init(document.getElementById('main')).setOption({
            title: {
                text: '{$graphical.title}'
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['{$graphical.category_name}']
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: data_name
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    name: '{$graphical.category_name}',
                    type: 'line',
                    // stack: '总量',
                    data: data_val
                },
            ]
        });
    }else if(shape==2){
        echarts.init(document.getElementById('main')).setOption({
            title: {
                text: '{$graphical.title}'
            },
            tooltip : {
                trigger: 'axis',
                axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                    type : 'line'        // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            legend: {
                data:['{$graphical.category_name}']
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis : [
                {
                    type : 'category',
                    data : data_name
                }
            ],
            yAxis : [
                {
                    type : 'value'
                }
            ],
            series : [
                {
                    name:'{$graphical.category_name}',
                    type:'bar',
                    data:data_val
                }
            ]
        })
    }else if(shape==3){
        var selected = {};
        var seriesData = [];
        for (var i in data_name){
            selected[data_name[i]]=i < data_name.length;
            seriesData.push({
                name: data_name[i],
                value: data_val[i]
            });
        }
        echarts.init(document.getElementById('main')).setOption({
            title: {
                text: '{$graphical.title}',
                x:'center'
            },

            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            tooltip : {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                type: 'scroll',
                orient: 'vertical',
                right: 10,
                top: 20,
                bottom: 20,
                data: data_name,
                selected: selected
            },
            series : [
                {
                    name: '{$graphical.category_name}',
                    type: 'pie',
                    radius : '75%',
                    center: ['40%', '50%'],
                    data: seriesData,
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        })
    }

</script>
</body>
</html>